<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/include/taglibs.jsp" %>
<html>
<head>
    <%@include file="/include/header.html" %>
    <link rel="stylesheet" href="${ctx}/libjs/plugins/treeBox/treeBox.css">
    <script type="text/javascript" src="${ctx}/libjs/plugins/treeBox/treeBox.js"></script>
    <script type="text/javascript" src="${ctx}/appjs/elec/elecStation.js"></script>
    <link rel="stylesheet" href="${ctx}/libjs/plugins/laydate/laydate.css">
    <link rel="stylesheet" href="${ctx}/libjs/plugins/bootStrap-table-fixed-column/bootstrap-table-fixed-columns.css">
    <link rel="stylesheet" href="${ctx}/libjs/plugins/h-ui/css/H-ui.admin.css">
    <link rel="stylesheet" href="${ctx}/statics/css/update.css?v=20200825">
    <link rel="stylesheet" href="${ctx}/statics/css/common.css?v=20200825">
    <link rel="stylesheet" href="${ctx}/libjs/plugins/bootstrap-table-pagejump/bootstrap-table-pagejump.css">
    <script src="${ctx}/libjs/plugins/bootstrap-table-pagejump/bootstrap-table-pagejump.js"></script>
    <link rel="stylesheet" href="${ctx}/libjs/plugins/bootStrap-table-fixed-column/bootstrap-table-fixed-columns.css">
    <script src="${ctx}/libjs/plugins/bootStrap-table-fixed-column/bootstrap-table-fixed-columns.js"></script>
    <style>
        .treeBox .tree-active:hover {
            /*background:#a84747;*/
            color: #fff !important;
        }

        .treeBox a {
            color: #000;
            text-align: center !important;
        }

        .tree-active {
            background: #1e9fff;
            color: #fff !important;
        }

        .treeBox .tree-active:hover {
            background: #1e9fff;
            color: #fff !important;
        }

        .treeBox label {
            text-align: center;
        }

        .bootstrap-table .fixed-table-container .table thead th .th-inner {
            text-align: center !important;
        }

        .fixed-table-body-columns1 {
            width: 203px !important;
        }

        .fixed-table-toolbar {
            display: block;
            /*top: 37px;*/
            right: 90px;
            position: absolute;
            z-index: 100000;
        }
    </style>
</head>

<script type="text/javascript">
    $('#topLink', window.parent.document).html(function (i, origText) {
        return '<ol class="breadcrumb">' +
            '<li class="breadcrumb-item">' +
            '<a href="">主页</a>' +
            '</li>' +
            '<li class="breadcrumb-item">' +
            '<a>设备管理</a>' +
            '</li>' +
            '<li class="breadcrumb-item">' +
            '<strong>站点列表</strong>' +
            '</li>' +
            '</ol>';
    });

    var has_add = '';
    var has_edit = '';
    var has_delete = '';
    var StationManager_station_update = false;
    var StationManager_station_look = false;
</script>

<body class="gray-bg elecStationBody">
<div class="wrapper wrapper-content ">
    <div class="col-sm-12">
        <div class="ibox">
            <div class="ibox-body">
                <div class="row">
                        <input id="stationName" name="stationName" type="text"
                               class="form-control longInput input-distance"
                               placeholder="站点名称">
                        <input id="operatorName" name="operatorName" type="text"
                               class="form-control longInput input-distance"
                               placeholder="加盟商名称">
                        <select name="bizType" id="bizType" class="form-control shortInput input-distance">
                            <option value="">站点类型</option>
                            <option value="0">自营</option>
                            <option value="1">加盟</option>
                        </select>
                        <select type="text" class="form-control shortInput input-distance" name="stationStaus"
                                id="stationStaus">
                            <option value="">站点状态</option>
                            <option value="0">停用</option>
                            <option value="1">正常</option>
                        </select>

                        <button class="btn btn-success input-distance" onclick="station.reLoad()">查询</button>
                        <button class="btn btn-success input-distance" onclick="station.reset()">重置</button>
                    <shiro:hasPermission name="StationManager_station_export">
                        <button class="btn btn-success input-distance exportBtn" onclick="station.exportList()">导出
                        </button>
                    </shiro:hasPermission>
                    <shiro:hasPermission name="StationManager_station_add">
                    <button type="button" class="btn btn-primary " style="margin-left: 4px"
                            onclick="station.addStation()">新增充电站
                        </shiro:hasPermission>
                    </button>
                </div>
                <%--  驳回理由  --%>
                <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
                     aria-labelledby="exampleModalLabel">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content" style="width: 820px;height: 420px">
                            <div class="modal-header" style="justify-content: flex-start">
                                <h6 class="modal-title" style="font-weight:bold">占桩费配置</h6>
                                <%--<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                        aria-hidden="true"></span></button>--%>
                            </div>
                            <div class="modal-body" style="height: 75%;">
                                <form id="contentForm" class="layui-form">
                                    <div class="form-group row">
                                        <label class="col-sm-3 col-form-label text-right">占桩费(/小时)</label>
                                        <%-- <input type="radio"
                                                name="occupyStatus" value="0" ${menu.menuType == "0"?'checked':''} /> 目录--%>
                                        <%-- <input class="form-control" type="radio" name="occupyStatus"  value="1"  checked>启用
                                         <input class="form-control" type="radio" name="occupyStatus"  value="0" >禁用--%>
                                        <input type="radio" name="occupyStatus" value="0" title="禁用">
                                        <input type="radio" name="occupyStatus" value="1" title="启用">
                                    </div>
                                    <div class="form-group row">
                                        <label class="col-sm-3 col-form-label text-right"></label>
                                        <span><input name="occupyFree" id="occupyFree" type="text"
                                                     placeholder="请输入">/小时，</span>
                                    </div>
                                    <div class="form-group row">
                                        <label class="col-sm-3 col-form-label text-right"></label>
                                        <span>插抢不充电超过<input name="occupyPrice" id="occupyPrice" type="text"
                                                            placeholder="请输入">分钟收费，不足一小时按一小时计算
                                    </div>
                                </form>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-success" id="submitForm">确认</button>
                                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row"  id="isFlag0">
                    <table cellspacing="0" cellpadding="0">
                        <tr>
                            <td style="padding-left:2px;">总计:共</td>
                            <td id="operatorId" style="text-align: center"></td>
                            <td style="padding-left:2px;">家加盟商,</td>
                            <td id="stationId" style="text-align: center"></td>
                            <td style="padding-left:2px;">个站点,</td>
                            <td id="pileId" style="text-align: center"></td>
                            <td style="padding-left:2px;">个充电桩,(快充</td>
                            <td id="kuaiId" style="text-align: center"></td>
                            <td style="padding-left:2px;">个,慢充</td>
                            <td id="manId" style="text-align: center"></td>
                            <td style="padding-left:2px;">个),</td>
                            <td id="gunId" style="text-align: center"></td>
                            <td style="padding-left:2px;">个充电枪</td>
                        </tr>
                    </table>
                </div>
                <div class="row" id="isFlag1">
                    <table cellspacing="0" cellpadding="0">
                        <tr>
                            <td style="padding-left:2px;">其中空闲</td>
                            <td id="kxId" style="text-align: center"></td>
                            <td style="padding-left:2px;">个,已插枪</td>
                            <td id="cqId" style="text-align: center"></td>
                            <td style="padding-left:2px;">个,启动中</td>
                            <td id="qdzId" style="text-align: center"></td>
                            <td style="padding-left:2px;">个,充电中</td>
                            <td id="cdzId" style="text-align: center"></td>
                            <td style="padding-left:2px;">个,已结束</td>
                            <td id="yjsId" style="text-align: center"></td>
                            <td style="padding-left:2px;">个,故障</td>
                            <td id="gzId" style="text-align: center"></td>
                            <td style="padding-left:2px;">个,离线</td>
                            <td id="lxId" style="text-align: center"></td>
                            <td style="padding-left:2px;">个</td>
                        </tr>
                    </table>
                </div>
                <table id="exampleTable" data-mobile-responsive="true">
                </table>
            </div>
        </div>
    </div>
</div>

<shiro:hasPermission name="StationManager_station_update">
    <script>
        StationManager_station_update = true;
    </script>
</shiro:hasPermission>
<shiro:hasPermission name="StationManager_station_look">
    <script>
        StationManager_station_look = true;
    </script>
</shiro:hasPermission>
<script type="text/javascript">

    station.init();
</script>
<script>
    function selectByArea() {
        $.ajax({
            "type": "POST",
            "url": "${ctx}/elecStation/selectByArea",
            "data": {},
            "success": function (data) {
                console.log(data)
                treeBox({
                    el: '$(".focusEl")', //焦点或者点击事件DOM 必传可以是非input元素
                    // width:{ // 各级列表宽度 可选 不传默认值就为 160，160，160，200
                    //     lv1:160,
                    //     lv2:160,
                    //     lv3:160,
                    //     selected:200
                    // },
                    // selectedNum:3,// 设置可以选择多少个复选框 可选 不传默认3
                    // height:280, //高度 不传默认值 280
                    data: data, //数据 必传
                    topData: data,// 常用数据 可选
                    confirm: function (res) { //回调函数 必传 会以json的格式返回所选中的数据
                        if (res.length > 0) {
                            for (var k in res) {
                                $(".areaId").eq(k).val(res[k].value);
                            }
                        } else {
                            $(".areaId").val("");
                        }
                    }
                });
            }
        })
    }

    selectByArea()


</script>
</body>
</html>
<script>
    //下拉组件注册
    $(function () {
        $('#bizType').searchableSelect();
        $('#operateStatus').searchableSelect();
        station.getCountData();
    })
    layui.use(['form', 'jquery', 'tree', 'laydate', 'util'], function () {
    });

</script>
